<template>
	<div class="box">
		<view class="tlt">{{mode==1?'原手机号校验':'新手机号校验'}}</view>
		<view class="cell">
			<view>手机号码</view>
			<input type="number" v-model="phone" maxlength="11" :placeholder="mode==1?'请输入原手机号码':'请输入新手机号码'"/>
		</view>
		<view class="cell">
			<view>验证码</view>
			<input type="number" v-model="code" maxlength="6"  placeholder="请输入短信验证码"/>
		</view>
		<view class="sendCode" @click.stop="sendCode">{{sendMsg}}</view>
		<view class="submit" @click.stop="submit_Click">{{mode==1?'下一步，填写新手机号':'立刻验证'}}</view>
	</div>
</template>

<script>
	export default {
		data(){
			return{
				phone: '',
				code: '',
				isCanSend:true,
				sendMsg:'发送短信验证码',
				wait:60,
				mode:1,
				userInfo:{
					mobile:''
				}
			}
		},
		onLoad(options) {
			this.mode=options.mode
			let userInfo=uni.getStorageSync('userInfo')
			userInfo=JSON.parse(userInfo)
			this.userInfo=userInfo
			this.phone=this.mode==1?this.userInfo.mobile:''
		},
		methods:{
			// 发送验证码
			sendCode() {
				if(this.phone.length==0){
					uni.showToast({
						title:'手机号不能为空',
						icon:'none'
					})
					return
				}
				if(!this.isCanSend)return
				let _this=this
				var param = {
					url: '/v1/sms/get/code',
					method: 'POST',
					data: {
						mobile: this.phone,
						type: 1
					},
					callBack: function(res) {
						uni.hideLoading()
						uni.showToast({
							title:'发送成功',
							icon:'none'
						})
						_this.sendAgain()
					}
				}
				uni.showLoading({
					title: '正在发送'
				})
				this.$http.request(param)
			},
			
			sendAgain(){
				let _this=this
				if(this.wait==0){
					this.wait=60
					this.isCanSend=true
					this.sendMsg='发送短信验证码'
				}
				else{
					this.wait--
					this.isCanSend=false
					this.sendMsg=this.wait+'s后可重发'
					setTimeout(function(){
						_this.sendAgain()
					},1000)
				}
			},
			
			// 提交
			submit_Click(){
				if(this.phone.length==0){
					uni.showToast({
						title:'请输入手机号',
						icon:'none'
					})
					return
				}
				if(this.code.length==0){
					uni.showToast({
						title:'请输入验证码',
						icon:'none'
					})
					return
				}
				if(this.mode==1){
					this.verifyOldPhone(this.phone,this.code)
				}
				else{
					this.verifyNewPhone(this.phone,this.code)
				}
			},
			
			verifyOldPhone(phone,code){
				var param={
					url:'/v1/app/member/verify/old/mobile',
					method:'GET',
					data:{
						oldMobile:phone,
						code:code
					},
					callBack:function(res){
						uni.hideLoading()
						console.log(res)
						if(res.code==0){
							uni.navigateTo({
								url:'/pages/mine/modifyPhoneNum?mode=2'
							})
						}
					}
				}
				uni.showLoading({
					title:'正在校验'
				})
				this.$http.request(param)
			},
			
			verifyNewPhone(phone,code){
				var param={
					url:'/v1/app/member/update/new/mobile',
					method:'POST',
					data:{
						newMobile:phone,
						code:code
					},
					callBack:function(res){
						uni.hideLoading()
						if(res.code==0){
							uni.showToast({
								title:'修改成功'
							})
							uni.clearStorageSync('userInfo')
							uni.reLaunch({
								url:'/pages/login/login'
							})
						}
						else{
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
						}
					}
				}
				uni.showLoading({
					title:'正在校验'
				})
				this.$http.request(param)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: white;
	}
	.box{
		padding: 15px;
	}
	.tlt{
		color: #333333;
		font-size: 24px;
		font-weight: bold;
		margin-top: 86px;
		margin-bottom: 50px;
	}
	.cell{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		height: 50px;
		border-bottom: solid 1rpx #DDDDDD;
		view{
			color: #333333;
			font-size: 18px;
			margin-right: 30px;
			width: 75px;
		}
		input{
			flex: 1;
		}
	}
	.sendCode{
		font-size: 14px;
		color: #6ABF6C;
		text-align: right;
		margin-top: 17px;
		margin-bottom: 43px;
		
	}
	
	.submit{
		height: 45px;
		line-height: 45px;
		text-align: center;
		color: white;
		font-size: 16px;
		background:#6ABF6C;
		border-radius: 50px;
	}
	.customer{
		display: flex;
		justify-content: center;
		flex-direction: row;
		flex-wrap: nowrap;
		font-size: 12px;
		color: #999999;
		margin-top: 27px;
		.tel{
			color: #6ABF6C;
		}
	}
</style>
